@import "partials/var"
@import "partials/reset"
@import "partials/other"

$directions = {t: top, r: right, b: bottom, l: left, v: top bottom, h: left right}

/****************************
*        字体大小            *
* **************************/
.fz-0
    font-size 0px
for size in range(12, 24, 2)
    .fz-{size}
        font-size size px

/****************************
*   文字颜色，背景色，边框    *
* **************************/
for $clazz, $color in $colors
	.{$clazz}
		if match('bg', $clazz)
			background-color $color
		else if match('bd', $clazz)
			border(a, $color)
		else
			color $color

/****************************
*   圆角                    *
* **************************/
for $size in range(0, 10, 2)
    .br-{$size}
        border-radius: $size px


/****************************
*        常用间距            *
* **************************/
gap($size)
    if $size
        $suffix = - $size
    else
        $size = 12
        $suffix = ''

    .mg{$suffix}
        margin $size px
    .pd{$suffix}
        padding $size px
    for $d, $dirs in $directions
        .mg{$d}{$suffix}
            for $dir in $dirs
                margin-{$dir} $size px
        .pd{$d}{$suffix}
            for $dir in $dirs
                padding-{$dir} $size px
for $size in range(4, 40, 2)
    gap($size)
gap(0)
/****************************
*           position        *
* **************************/
for $pos in relative absolute fixed
    .{$pos}
        position: $pos


/****************************
*          display          *
* **************************/
for $dis in block inline-block none inline
    .{$dis}
        display: $dis !important

/****************************
*          align            *
* **************************/
.center, .txt-center
    text-align: center

for $dis in right center left
    .txt-{$dis}
        text-align: $dis !important
.center-h
    position: relative
    left: 50%
    transform: translate3d(-50%, 0, 0)
.center-v
    position: relative
    top: 50%
    transform: translate3d(0, -50%, 0)
.middle
    vertical-align middle

/****************************
*          flex            *
* **************************/
.flex
    display flex
    justify-content space-between
    align-items center
    for $flexd in start center end
        &.{$flexd}
            if $flexd == center
                justify-content $flexd
            else
                justify-content flex- + $flexd
/****************************
*          flex            *
* **************************/
.flex-v
    display flex
    flex-direction column
.flex-1
    // flex-grow 1
    flex 1

/****************************
*          radius            *
* **************************/
.radius
    border-radius 4px

.box-shadow
    box-shadow 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04)

/****************************
*       input/select        *
* **************************/
for $size in range(144, 304, 8)
    .iptw-{$size}
        width: ($size px) !important
        .el-input
            width: ($size px) !important
/****************************
*          header            *
* **************************/
.header
  padding 0 8px
  height 48px
  background #fff
  border-bottom 1px solid #DCDFE6
  .crumbs
    display inline-block
    margin-right 8px
    vertical-align middle
    font-size 16px

/****************************
*          content           *
* **************************/
.content
  margin 10px 0 0 0
  .search-items
    .search-item
      display inline-block
      vertical-align top
      line-height 28px
      &:not(:first-child)
        margin 0 0 0 8px
  .content-main
    margin 10px 0 0 0
    .operate
      color #409EFF
      cursor pointer
      &:not(:first-child)
        margin-left 8px
    .pagination
      margin 16px 0 0 0

/****************************
*          content带边框      *
* **************************/
.bg-main
  margin 0 !important
  background rgb(228, 231, 236)
  .header
    margin 0
    padding 0 24px
    border-bottom 0
  .content
    margin 16px
    padding 16px
    min-height calc(100% - 54px)
    background #FFFFFF
    border-radius 6px

/****************************
*          form表单样式      *
* **************************/
.el-form-item
  margin 10px 5px
.singleForm
  margin-left 128px
  margin-top 40px
  .el-input
    width 320px
  .el-checkbox-group
    width 320px
  .el-textarea
    width 320px
  .formButton
    margin-top 32px
.doubleForm
  width 1064px
  margin 40px auto 0
  .upload-demo
    width 812px
  .el-input
    width 280px
  .el-textarea
    width 812px
  .el-transfer-panel__body
    .el-input
      width auto
  .el-col
    .el-input
      width 280px
    .el-textarea
      width 280px
  .formButton
    margin-top 32px
    text-align center
    .el-button:first-child
      margin-left -126px
/****************************
*          上传文件按钮样式      *
* **************************/
.file
  width 80px
  height 29px
  line-height 29px
  background #409EFF
  display inline-block
  border-radius 0 4px 4px 0
  color: #ffffff
  padding-left 8px

/****************************
*       左侧树样式，padding  *
* **************************/
.tree-div
  padding: 8px;

/****************************
*       滚动条样式          *
* **************************/
.scrollTree
  height 100%
.fpi-scroll .el-scrollbar__wrap
  overflow-x hidden

/****************************
*       上传文本样式          *
* **************************/
.el-upload-list__item-name
  margin-right 110px!important
/****************************
*       多选select样式          *
* **************************/
.el-select__tags
  &>span
    max-width 100%
    span.el-tag.el-tag--info
      max-width 100%
      .el-select__tags-text
        display inline-block
        vertical-align middle
        max-width 90%
        text-overflow ellipsis
        overflow hidden
        white-space nowrap

/****************************
*       日期选择器          *
* **************************/
.el-date-editor .el-range-separator {
  width: 10% !important;
}
/****************************
*    树选择输入框删除按钮     *
* **************************/
.fpi-clear-tree-input
  i.fpi-clear-btn
    display none
  &:hover
    i.fpi-clear-btn
      display inline-block            